<template>
  <div class="container">
    <div class="item-left">
      <ItemPage>
        <template #main>
          <EcahrtsI />
        </template>
      </ItemPage>
      <ItemPage>
        <template #main>
          <EcahrtsII />
        </template>
      </ItemPage>
    </div>
    <div class="item-right">
      <ItemPage>
        <template #main>
          <EcahrtsIII />
        </template>
      </ItemPage>
      <ItemPage>
        <template #main>
          <EcahrtsIV />
        </template>
      </ItemPage>
    </div>
  </div>
</template>

<script setup>
import ItemPage from "@/components/ItemPage.vue";
import EcahrtsI from "@/components/EcahrtsI.vue";
import EcahrtsII from "@/components/EcahrtsII.vue";
import EcahrtsIII from "@/components/EcahrtsIII.vue";
import EcahrtsIV from "@/components/EcahrtsIV.vue";
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  // height: 100%;
  margin: 0 auto;
  display: flex;
  .item-right,
  .item-left {
    flex: 1;
  }
}
</style>
